<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医院综合管理仪表板 - 添加患者</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="integrated-dashboard.css">
    <link rel="stylesheet" href="patient-form.css">
    <script src="integrated-dashboard.js" defer></script>
    <style>
        .menu-item {
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .menu-item:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Sidebar -->
        <div class="sidebar">
            <div class="profile">
                <div class="profile-image">
                    <img src="./images/man.png" alt="Profile Picture">
                </div>
                <div class="profile-info">
                    <p>张医生<br>管理员</p>
                </div>
                <div class="collapse-button">
                    <img src="images/right-arrows.png" alt="Collapse">
                </div>
            </div>
            
            <div class="menu-item" onclick="window.location.href='dashboard.html'">
                <div class="dashboard-icon">
                    <div class="dashboard-box"></div>
                    <div class="dashboard-box"></div>
                    <div class="dashboard-box"></div>
                    <div class="dashboard-circle"></div>
                </div>
                <span class="menu-text">仪表板</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='dashboard.html'">
                <div class="icon-container">
                    <img src="images/appointment.png" alt="Appointment">
                </div>
                <span class="menu-text">预约管理</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='dashboard.html'">
                <div class="icon-container">
                    <img src="images/doctor.png" alt="Doctor">
                </div>
                <span class="menu-text">医生管理</span>
            </div>
            
            <div class="menu-item active" onclick="window.location.href='integrated-dashboard.html'">
                <div class="icon-container">
                    <img src="images/patient.png" alt="Patients">
                </div>
                <span class="menu-text">患者管理</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='dashboard.html'">
                <div class="icon-container">
                    <img src="images/setting-lines.png" alt="Settings">
                </div>
                <span class="menu-text">系统设置</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='payment.html'">
                <div class="icon-container">
                    <img src="images/security-payment.png" alt="Payments">
                </div>
                <span class="menu-text">支付管理</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='dashboard.html'">
                <div class="icon-container">
                    <img src="images/team.png" alt="Team">
                </div>
                <span class="menu-text">团队管理</span>
            </div>
            
            <div class="menu-item logout" onclick="window.location.href='index.html'">
                <div class="icon-container">
                    <img src="images/power.png" alt="Logout">
                </div>
                <span class="menu-text">退出登录</span>
            </div>
        </div>
        
        <!-- Main Content -->
        <div class="main-content">
            <div class="header">
                <div class="profile-section">
                    <img src="images/file.png" alt="File Icon" class="file-icon">
                    <h1>患者</h1>
                </div>
            </div>
            
            <div class="content-section">
                <!-- Patient Form Section -->
                <div class="patient-form-section">
                    <div class="section-header">
                        <h2>添加患者信息</h2>
                        <button class="patient-list-btn" onclick="window.location.href='integrated-dashboard.html'">患者列表</button>
                    </div>
                    
                    <form class="form-container" id="patientForm">
                        <!-- 基本信息 -->
                        <div class="form-section">
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="firstName" class="required">名字 *</label>
                                    <input type="text" id="firstName" class="form-control" placeholder="请输入名字" required>
                                </div>
                                
                                <div class="form-group">
                                    <label for="lastName">姓氏 *</label>
                                    <input type="text" id="lastName" class="form-control" placeholder="请输入姓氏" required>
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="email">电子邮箱 *</label>
                                    <input type="email" id="email" class="form-control" placeholder="请输入电子邮箱" required>
                                </div>
                                
                                <div class="form-group">
                                    <label for="mobile">手机号码 *</label>
                                    <input type="tel" id="mobile" class="form-control" placeholder="请输入手机号码" required>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 个人详情 -->
                        <div class="form-section">
                            <div class="form-row three-columns">
                                <div class="form-group">
                                    <label for="gender">性别 *</label>
                                    <select id="gender" class="form-control" required>
                                        <option value="">请选择性别</option>
                                        <option value="male">男</option>
                                        <option value="female">女</option>
                                        <option value="other">其他</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label for="maritalStatus">婚姻状况 *</label>
                                    <select id="maritalStatus" class="form-control" required>
                                        <option value="">请选择婚姻状况</option>
                                        <option value="single">未婚</option>
                                        <option value="married">已婚</option>
                                        <option value="divorced">离异</option>
                                        <option value="widowed">丧偶</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label for="age">年龄 *</label>
                                    <input type="number" id="age" class="form-control" placeholder="请输入年龄" min="0" max="150" required>
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="bloodGroup">血型 *</label>
                                    <select id="bloodGroup" class="form-control" required>
                                        <option value="">请选择血型</option>
                                        <option value="A+">A+</option>
                                        <option value="A-">A-</option>
                                        <option value="B+">B+</option>
                                        <option value="B-">B-</option>
                                        <option value="AB+">AB+</option>
                                        <option value="AB-">AB-</option>
                                        <option value="O+">O+</option>
                                        <option value="O-">O-</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label for="dob">出生日期 *</label>
                                    <input type="date" id="dob" class="form-control" required>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 联系信息 -->
                        <div class="form-section">
                            <div class="form-row full-width">
                                <div class="form-group">
                                    <label for="address">地址</label>
                                    <textarea id="address" class="form-control" placeholder="请输入完整地址" rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 医疗信息 -->
                        <div class="form-section">
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="sugar">血糖水平</label>
                                    <input type="text" id="sugar" class="form-control" placeholder="请输入血糖水平">
                                </div>
                                
                                <div class="form-group">
                                    <label for="allergies">过敏史</label>
                                    <input type="text" id="allergies" class="form-control" placeholder="请输入已知过敏信息">
                                </div>
                            </div>
                        </div>
                        
                        <!-- 文件上传 -->
                        <div class="upload-section">
                            <div class="form-group">
                                <label for="uploadImage">上传患者照片</label>
                                <div class="upload-container">
                                    <input type="file" id="uploadImage" hidden accept="image/*">
                                    <button type="button" class="browse-btn" onclick="document.getElementById('uploadImage').click()">浏览图片</button>
                                    <span class="file-name" id="fileName">未选择文件</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 表单操作 -->
                        <div class="form-actions">
                            <button type="submit" class="submit-btn">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 文件上传处理
        document.getElementById('uploadImage').addEventListener('change', function() {
            const fileName = this.files[0] ? this.files[0].name : '未选择文件';
            document.getElementById('fileName').textContent = fileName;
        });

        // 表单提交处理
        document.getElementById('patientForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const formData = new FormData(this);
            const patientData = {};
            
            // 将FormData转换为对象
            for (let [key, value] of formData.entries()) {
                patientData[key] = value;
            }
            
            // 这里可以添加表单验证逻辑
            if (validateForm(patientData)) {
                // 模拟提交成功
                alert('患者信息已成功添加！');
                // 清空表单
                this.reset();
                document.getElementById('fileName').textContent = '未选择文件';
            }
        });

        // 表单验证函数
        function validateForm(data) {
            const requiredFields = ['firstName', 'lastName', 'email', 'mobile', 'gender', 'maritalStatus', 'age', 'bloodGroup', 'dob'];
            
            for (let field of requiredFields) {
                const element = document.getElementById(field);
                if (!element.value.trim()) {
                    alert(`请填写${element.previousElementSibling.textContent}`);
                    element.focus();
                    return false;
                }
            }
            
            // 验证邮箱格式
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(data.email)) {
                alert('请输入有效的邮箱地址');
                document.getElementById('email').focus();
                return false;
            }
            
            // 验证手机号格式（简单验证）
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (!phoneRegex.test(data.mobile.replace(/\s/g, ''))) {
                alert('请输入有效的手机号码');
                document.getElementById('mobile').focus();
                return false;
            }
            
            return true;
        }

        // 年龄自动计算（基于出生日期）
        document.getElementById('dob').addEventListener('change', function() {
            const birthDate = new Date(this.value);
            const today = new Date();
            const age = Math.floor((today - birthDate) / (365.25 * 24 * 60 * 60 * 1000));
            
            if (age >= 0 && age <= 150) {
                document.getElementById('age').value = age;
            }
        });
    </script>
</body>
</html> 